<template>
  <div class="cinema-search-input-component">
    <div class="top">
      <SelectCityBtn
        :style="{ background: '#fff', flex: 'none' }"
      ></SelectCityBtn>
      <div class="input">
        <nut-searchbar
          placeholder="搜索影院"
          :clearable="true"
          v-model="searchValue"
          @clear="clear"
          @search="search"
        ></nut-searchbar>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import SelectCityBtn from "../select-city-btn/index.vue";
const searchValue = ref("");
const emit = defineEmits(["onSearch"]);
const search = () => {
  emit("onSearch", searchValue.value);
};
const clear = () => {
  emit("onSearch", searchValue.value);
};
</script>
<style lang="scss">
.cinema-search-input-component {
  display: flex;
  flex-direction: column;
  background: #fff;
  .top {
    display: flex;
    flex-direction: row;
    padding: 0.2rem 0.5rem 0 0.5rem;
    .input {
      flex: 1;
      background: #f00;
      .nut-searchbar {
        padding: 0;
        .nut-searchbar__search-input {
          background: #f6f8f9;
          box-shadow: unset !important;
          position: relative;
          .nut-searchbar__input-inner-icon {
            position: absolute;
            right: 0;
          }
        }
      }
    }
  }
}
</style>
